<template>
	<view class="red">
		<view class="message_top">
			<view class="message_top_title" :style="{top:computedTop}">抢包记录</view>
			<view class="message_top_back" :style="{top:computedTop}" @click="Back">
				<image src="../../static/search/back.png" class="bfbimages"></image>
			</view>
			
			
			<view class="red_one">
				<view class="red_one_list" >
					<view class="red_one_list_list" v-for="(item,index) in red_List" :key="index">
						<view>{{item.price}}</view>
						<view>累计{{item.text}}</view>
						<view>{{item.name}}</view>
					</view>
				</view>
				<view class="red_one_list" style="margin: 40rpx auto 0;">
					<view class="red_one_list_list">
						<view>{{Zdata.ongoing_count==null?'0':`${Zdata.ongoing_count}`}}</view>
						<view></view>
						<view>待使用</view>
					</view>
					
					<view class="red_one_list_list">
						<view>{{Zdata.completed_count==null?'0':`${Zdata.completed_count}`}}</view>
						<view></view>
						<view>已使用</view>
					</view>
					
					<view class="red_one_list_list">
						<view>{{Zdata.expired_count==null?'0':`${Zdata.expired_count}`}}</view>
						<view></view>
						<view>已过期</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="red_two">
			<view style="width: 100%;height: 160rpx;"></view>
			<view class="red_two_title">明细记录</view>
			<view class="red_two_list" v-for="(item,index) in For_list" :key="index">
				<view class="red_two_list_one">
					<view class="red_two_list_one_L">
						<view class="flex">
							<image src="../../static/hb_zt/hongq.png" class="bfbimages" v-if="item.activity_type==1"></image>
							<image src="../../static/hb_zt/hongc.png" class="bfbimages" v-if="item.activity_type==2"></image>
							<image src="../../static/hb_zt/hongb.png" class="bfbimages" v-if="item.activity_type==3"></image>
							<image src="../../static/hb_zt/hongz.png" class="bfbimages" v-if="item.activity_type==4"></image>
						</view>
						 <!-- 1=红包,2=优惠券,3=邀约,4=折扣价 -->
						<text v-if="item.activity_type==1">现金红包</text>
						<text v-if="item.activity_type==2">优惠券红包</text>
						<text v-if="item.activity_type==3">邀约红包</text>
						<text v-if="item.activity_type==4">折扣红包</text>
						<view v-if="item.is_forward==1">转发赚钱</view>
					</view>
					<view class="red_two_list_one_R">￥{{item.amount}}</view>
				</view>
				
				<view class="red_two_list_two" style="justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<text>发包商家：</text>
						<view class="flex" style="width: 54rpx;height: 54rpx;border-radius: 50%;overflow: hidden;background-color: greenyellow;">
							<image :src="item.merchant_avatar" class="bfbimages"></image>
						</view>
						<view class="ellipsis" style="display: inline-block;font-size: 32rpx;font-weight: bold;margin-left: 15rpx;color: #000000;width: 250rpx;">{{item.merchant_name}}</view>
						<view class="flex" style="width: 14rpx;height: 20rpx;text-align: center;line-height: 20rpx;margin-left: 15rpx;">
							<image src="../../static/hei_right.png" class="bfbimages"></image>
						</view>
					</view>
					<view class="red_two_list_two_btn" v-if="item.status==1" @click="Tkuan(item)">申请退款</view>
				</view>
				
				<view class="red_two_list_two">
					<text>到期日期：{{item.expire_time}}</text>
				</view>
				
				<view class="red_two_list_two" style="justify-content: space-between;border-top: 2rpx solid #EEEEEE;height: 66rpx;">
					<text>抢包时间：{{item.create_time}}</text>
					<!-- 类型;1=未使用,2=完成,3=已退款,4=已过期,5=未支付,6=已评价 -->
					<text style="color: #FE4825;" v-if="item.status==1">未使用</text>
					<!-- <text style="color: #666666;" v-if="item.status==2">已完成</text> -->
					<text style="color: #666666;" v-if="item.status==3">已退款</text>
					<text style="color: #666666;" v-if="item.status==4">已过期</text>
					<text style="color: #666666;" v-if="item.status==5">未支付</text>
					<text style="color: #666666;" v-if="item.status==6">已评价</text>
					<view class="red_two_list_two_btn1" v-if="item.status==2" @click="LinkPjia(item)">去评价</view>
					<view class="red_two_list_two_btn1" v-if="item.status==1" @click="Go(item)">去使用</view>
				</view>
				
			</view>
			
			<view style="width: 100%;height: 250rpx;text-align: center;line-height: 250rpx;font-size: 28rpx;color: #999999;">没有更多啦~</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: null,
				red_List:[{
					name:'现金红包',
					price:'',
					text:''
				},
				{
					name:'优惠券',
					price:'',
					text:''
				},
				{
					name:'邀约红包',
					price:'',
					text:''
				},
				{
					name:'折扣红包',
					price:'',
					text:''
				}],
				For_list:'',
				Zdata:''
			}
		},
		computed: {
			computedTop() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 6}px`;
				}
				return '0px';
			},
		},
		onLoad() {
			const info = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info;
		},
		onShow() {
			this.ListApi()
			this.DataList()
		},
		methods: {
			Tkuan(item){
				console.log(item,'申请退款');
				uni.showToast({
					title: '退款失败!',
					icon: 'none',
					duration: 2000
				});
			},
			Go(item){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			LinkPjia(item){
				uni.navigateTo({
					url:'/pages/evaluate/evaluate?data=' + JSON.stringify(item)
				})
			},
			DataList(){
				this.$request('/api/user/userReceiveItem').then((res)=>{
					console.log(res.data,'数据统计');
					
					this.Zdata=res.data
					
					if(res.data.red_count==null){
						this.red_List[0].price=0
					}else{
						this.red_List[0].price=res.data.red_count
					}
					if(res.data.red_amount==null){
						this.red_List[0].text=0
					}else{
						this.red_List[0].text=res.data.red_amount
					}
					
					if(res.data.coupon_count==null){
						this.red_List[1].price=0
					}else{
						this.red_List[1].price=res.data.coupon_count
					}
					
					
					if(res.data.invite_count==null){
						this.red_List[2].price=0
					}else{
						this.red_List[2].price=res.data.invite_count
					}
					if(res.data.invite_amount==null){
						this.red_List[2].text=0
					}else{
						this.red_List[2].text=res.data.invite_amount
					}
					
					if(res.data.discount_count==null){
						this.red_List[3].price=0
					}else{
						this.red_List[3].price=res.data.discount_count
					}
					if(res.data.discount_amount==null){
						this.red_List[3].text=0
					}else{
						this.red_List[3].text=res.data.discount_amount
					}
				})
			},
			ListApi(){
				this.$request('/api/user/userReceiveList').then((res)=>{
					console.log(res.data.data,'用户抢包列表');
					this.For_list=res.data.data
				})
			},
			Back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.red{
	width: 100vw;
	min-height: 100vh;
	float: left;
	.message_top {
		width: 100%;
		height: 420rpx;
		position: relative;
		background: linear-gradient( 180deg, #FBEADA 0%, #FFFFFF 100%);
	
		.message_top_title {
			width: 100%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			position: absolute;
			left: 0;
			z-index: 2;
		}
	
		.message_top_back {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			left: 30rpx;
			z-index: 9;
		}
		
		.red_one{
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(88,64,64,0.09);
			border-radius: 20rpx;
			position: absolute;
			left: 50%;
			top: 210rpx;
			transform: translate(-50%,0);
			z-index: 9;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			.red_one_list{
				width: 630rpx;
				display: flex;
				align-items: center;
				margin: 0 auto;
			}
			.red_one_list_list{
				width: 157rpx;
			}
			.red_one_list_list>view:nth-child(1){
				width: 100%;
				height: auto;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			.red_one_list_list>view:nth-child(2),
			.red_one_list_list>view:nth-child(3){
				width: 100%;
				height: auto;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FE4624;
				margin-top: 25rpx;
			}
			.red_one_list_list>view:nth-child(3){
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
}

.red_two{
	width: 100%;
	.red_two_title{
		width: 690rpx;
		height: auto;
		margin: 0 auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.red_two_list{
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 25rpx 0rpx rgba(88,64,64,0.09);
		border-radius: 20rpx;
		margin: 20rpx auto 0;
		padding-bottom: 20rpx;
		.red_two_list_one{
			width: 630rpx;
			height: 92rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #ECECEC;
			margin: 0 auto;
			.red_two_list_one_L{
				width: auto;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
			.red_two_list_one_L>view:nth-child(1){
				width: 28rpx;
				height: 31rpx;
				margin-right: 12rpx;
				text-align: center;
				line-height: 31rpx;
			}
			.red_two_list_one_L>view:nth-child(2){
				width: 104rpx;
				height: 32rpx;
				background: rgba(254,72,37,0.2);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid #FE4825;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FE4825;
				text-align: center;
				line-height: 32rpx;
				margin-left: 10rpx;
			}
			.red_two_list_one_R{
				text-align: right;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FE4624;
			}
		}
		
		.red_two_list_two{
			width: 630rpx;
			height: 54rpx;
			display: flex;
			align-items: center;
			margin: 20rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #888888;
			.red_two_list_two_btn1{
				width: 158rpx;
				height: 54rpx;
				background: linear-gradient( 270deg, #FE4624 0%, #FF8143 100%);
				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 54rpx;
			}
			.red_two_list_two_btn{
				width: 136rpx;
				height: 46rpx;
				background: #F4F4F4;
				border-radius: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #FE4A26;
				text-align: center;
				line-height: 46rpx;
			}
		}
	}
}
</style>
